<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sb" uri="/struts-bootstrap-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<!DOCTYPE html>
<html>
<head>
<s:include value="/WEB-INF/content/common/header.jsp"></s:include>
<sj:head jqueryui="true" />
</head>
<body class="bg">
	<div class="container">
		<s:include value="/WEB-INF/content/common/title-head.jsp"></s:include>

		<div class="content">

			<s:include value="/WEB-INF/content/common/tab.jsp"></s:include>

			<script>
				$("#doorTab").addClass("active");
			</script>

			<div id="body">
				<div class="row">
					<div class="col-lg-10 col-lg-offset-1">
						<div class="title">
							<h2>
								<s:if test="mode.name().equals('ADD')">
									<s:text name="page.heading.add" />
								</s:if>
								<s:elseif test="mode.name().equals('EDIT')">
									<s:text name="page.heading.edit" />
								</s:elseif>
							</h2>
						</div>
					</div>
					<div class="col-lg-10 col-lg-offset-1">
						<div>
							<s:form id="doorForm" action="save" namespace="/door" method="post"
								theme="bootstrap">
								<s:hidden name="mode" />
								<s:hidden name="door.id" />
								<div class="form-group">
									<s:actionerror />
								</div>
								<fieldset>
									<div class="form-group">
										<s:text name="door.doorName" />
										<s:textfield name="door.doorName" cssClass="form-control"
											placeholder="%{getText('door.enter.doorName')}"
											required="true" />
									</div>

								</fieldset>
								<div class="form-group">
									<div class="form-group">
										<hr />
									</div>
									<div class="form-group">
										<label><s:text name="group.chose" /></label> <br />
										<s:if test="mode.name().equals('EDIT')">
											<label class="ml30"><s:text name="group.assigned" /></label>
											<br />
											<div class="form-group ml30">
												<s:if test="existingGroups.size == 0">
													<s:text name="checkbox.list.empty" />
												</s:if>
												<s:iterator value="existingGroups" status="rowIndex">
													<label class="checkbox-inline"> <input
														type="checkbox" name="selectedGroupList"
														id="selectedGroupList" value="<s:property value='%{id}'/>"
														checked="checked" /> <s:property value="%{name}" />
													</label>
												</s:iterator>
											</div>
										</s:if>
										<label class="ml30"><s:text name="group.available" /></label>
										<br />
										<div class="form-group ml30">
											<s:if test="notExistingGroups.size == 0">
												<s:text name="checkbox.list.empty" />
											</s:if>
											<s:iterator value="notExistingGroups" status="rowIndex">
												<label class="checkbox-inline"> <input
													type="checkbox" name="selectedGroupList"
													id="selectedGroupList" value="<s:property value='%{id}'/>" />
													<s:property value="%{name}" />
												</label>
											</s:iterator>
										</div>
									</div>
									<div class="form-group">
										<hr />
									</div>
									<div class="form-group">
										<label><s:text name="user.chose" /></label><br />
										<s:if test="mode.name().equals('EDIT')">
											<label class="ml30"><s:text name="user.assigned" /></label>
											<br />
											<div class="form-group ml30">
												<s:if test="existingUsers.size == 0">
													<s:text name="checkbox.list.empty" />
												</s:if>
												<s:iterator value="existingUsers" status="rowIndex">
													<label class="checkbox-inline"> <input
														type="checkbox" name="selectedUserList"
														id="selectedUserList" value="<s:property value='%{id}'/>"
														checked="checked" /> <s:property value="%{name}" />
													</label>
												</s:iterator>
											</div>
										</s:if>

										<label class="ml30"> <s:text name="user.available" /></label>
										<div class="ml30">
											<sj:autocompleter id="irisUserAutoCompleter" name="irisUserAutoCompleter" list="%{notExistingUsers}"
												listKey="id" listValue="name" onSelectTopics="onSelect"
												onCompleteTopics="onComp"  selectBoxIcon="true"/>

											<script type="text/javascript">
												$.subscribe('onSelect',
														function(event, data) {
															event.originalEvent.ui.item.remove();
															//$('#irisUserAutoCompleter_widget').val('');
															 $('#availableUserDiv').append('<label class="checkbox-inline"> <input type="checkbox" name="selectedUserList" id="selectedUserList" checked="checked" value="'+event.originalEvent.ui.item.value+'" />'+event.originalEvent.ui.item.label+'</label>');
															// $('#irisUserAutoCompleter').val('');
															 $('.s2j-combobox-input').html("");
														});
												
												$("#doorForm").submit(function(){
													$('#irisUserAutoCompleter').remove();
													$('#irisUserAutoCompleter_widget').remove();
												});
											</script>
										</div>
										<br />
										<div class="form-group ml30">
											<s:if test="notExistingUsers.size == 0">
												<s:text name="checkbox.list.empty" />
											</s:if>
											<div id="availableUserDiv"></div>
											<%-- <s:iterator value="notExistingUsers" status="rowIndex">
												<label class="checkbox-inline"> <input
													type="checkbox" name="selectedUserList"
													id="selectedUserList" value="<s:property value='%{id}'/>" />
													<s:property value="%{name}" />
												</label>
											</s:iterator> --%>
										</div>
									</div>

								</div>
								<div class="form-group">
									<div class="text-center"></div>
									<div class="text-center">
										<s:submit cssClass="btn btn-primary"
											value="%{getText('global.submit')}" />
										<s:if test="mode.name().equals('EDIT')">
											<s:url var="deleteDoorUrl" action="delete" namespace="/door"
												includeParams="none" escapeAmp="false">
												<s:param name="id" value="%{door.id}" />
											</s:url>
											<s:a href="%{#deleteDoorUrl}"
												onclick="return confirmDelete()" cssClass="btn btn-warning">
												<s:property value="%{getText('global.delete')}" />
											</s:a>
										</s:if>
									</div>
								</div>
							</s:form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<s:include value="/WEB-INF/content/common/footer.jsp"></s:include>
	</div>
</body>
</html>
